<template>
  <div>
    <el-form
      :model="formData"
      inline
      style="display: flex;justify-content: flex-end;margin-top: 10px;">
      <el-form-item prop="key">
        <el-input v-model="formData.key" placeholder="对象KEY"></el-input>
      </el-form-item>
      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="对象名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="search" type="primary">查找</el-button>
        <el-button @click="openDialog()" type="primary">添加</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="tableLoading" :data="tableData" border>
      <el-table-column align="center" label="对象KEY" prop="key"></el-table-column>
      <el-table-column align="center" label="对象名称" prop="name"></el-table-column>
      <el-table-column align="center" label="对象类型" prop="type"></el-table-column>
      <el-table-column align="center" label="对象大小" prop="size"></el-table-column>
      <el-table-column align="center" label="图片" prop="url">
        <template slot-scope="scope">
          <img :src="newUrl(scope.row.url)" width="80px">
        </template>
      </el-table-column>
      <el-table-column align="center" label="图片链接" prop="url"></el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button @click="deleteData(scope.row)" type="danger">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50, 100]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>

    
    <el-dialog
      :visible.sync="dialogVisible"
      title="上传图片"
      width="500">
     <el-upload
            action="http://192.168.200.251:8888/admin/storage/create"
            class="upload-demo"
            :on-success="avatarSuccess"
            :headers="{'Shopping-Admin-Token': token}"
            multiple
            :file-list="fileList"
            :show-file-list="false" 
            auto-upload>
            <el-button  size="small" type="primary" >点击上传</el-button>
    </el-upload>          
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'objectStockpile',
  componentTitle: '对象储存',
  data () {
    return {
      fileList:[{
        url:''
      }],
      token:sessionStorage.getItem('Shopping-Admin-Token'),
      tableLoading: false,
      dialogVisible: false,
      dialogType: 'add',
      dialogFormData: {
       url:'',
      },
      pageInfo: {
        page: 1,
        limit: 10,
        total: 0
      },
      formData: {
        key: '',
        name:'',
      },
      tableData: [],
    }
  },
  mounted () {
    this.search()
  },
   filters: {
    tableFilter(value, options) {
      let index = options.findIndex((item) => {
        return Number(item.value) === Number(value);
      });

      if (index < 0) {
        return "---";
      } else {
        return options[index].label;
      }
    },
  },
  methods: {
    newUrl(url){
      if (url!=''){
        return url.replace(/localhost:8888/g, '192.168.200.251:8888')
      }
    },
    openDialog () {
      this.dialogVisible = true
    },
    cancel () {
      this.$refs.dialogForm.resetFields()
      this.dialogVisible = false
    },
      avatarSuccess (res, file) {
      // 
     // this.dialogFormData.avatar = res.data.url.replace(/localhost:8888/g, 'c37g909045.zicp.vip')
       this.dialogFormData.url = res.data.url.replace(/localhost:8888/g, '192.168.200.251:8888')
          this.dialogVisible = false
          this.$notify.success({title: '添加成功'})
          this.search()
    },
    deleteData (row) {
      this.$confirm('此操作将删除该问题, 是否继续?').then(() => {
        axios({
          url: 'http://192.168.200.251:8888/admin/storage/delete',
          method: 'post',
          data: row,
          headers: {
            'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
          }
        }).then(res => {
          this.$notify.success({title: '删除成功'})
  
          this.search()
        })
      })
    },
    search () {
      this.tableLoading = true

      axios({
        url: 'http://192.168.200.251:8888/admin/storage/list',
        method: 'get',
        params: {
          page: this.pageInfo.page,
          limit: this.pageInfo.limit,
          ...this.formData,
        },
        headers: {
          'Shopping-Admin-Token': sessionStorage.getItem('Shopping-Admin-Token')
        }
      }).then(res => {
        this.tableLoading = false
        this.tableData = res.data.data.list

        this.pageInfo.total = res.data.data.total
        console.log('ss',res)
      })
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.search()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value

      this.search()
    }
  }
}
</script>